<template>
	<view>
		<view :class="getClass" class="flex-start">
			<view class="item_title">
			<text class="required" v-if="required">*</text>
			{{title}}</view>
			<view class="item_container">
				<slot name="content"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 列表中左右排列的组件
	 * @property {String} title 左侧label标签名
	 * @property {String} last 是否是最后一个条目
	 * @property {Boolean} required 是否是必填项
	 * @property {Slot} content Slot带入右侧实际的输入对象 
	 * @example <uni-appitem title="被保人姓名" >
			<view slot="content" class="">
				<input placeholder="请输入被保人姓名" type="text" v-model="info.insuredName" />
			</view>
		</uni-appitem>
	 */
	export default {
		data() {
			return {
			};
		},
		computed: {
			getClass () {
				var className = '';
				if (this.last === "last") {
					className = 'item_list item_last';
				} else {
					className = 'item_list';
				}
				return className
			}
		},
		props:['title', 'last','required']
	}
</script>

<style scoped lang="scss">
	.item_title {
		color: #727375;
		font-weight: 400;
	}
	.item_last {
		border-bottom-left-radius: 10upx;
		border-bottom-right-radius: 10upx;
	}
	.item_container { flex: 1; position: relative;text-align: right; display: flex; align-items: center; flex-direction: row-reverse;}
	.required{
		color: #F11818;
	}
</style>
